<template>
    <div class="points_mall2">
      <Banner></Banner>
      <!--人人为我，我为人人-->
      <img src="../../assets/images/list_new/woweirenren.png" alt="暂无图片资源" class="ren">
      <img src="../../assets/images/list_new/renrenweiwo.png" alt="暂无图片资源" class="wo">
      <!--人人为我，我为人人-->
      <mainContent :catname="catename">
        <div slot="menu_list">
          <dl>
            <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}"><span class="iconfont icon-shijian"></span>{{catename}}</dt>
          </dl>
        </div>

        <div slot="inner_content" class="inner_content">
          <div class="page_con" style="padding-right: 0px">

            <!--子路由区域-->
            <div>

              <!--<NoData v-if="flag"></NoData>-->
              <NoData v-if="lists.length==0"></NoData>

              <ul class="mall_ul">
                <li class="mall_item" v-for="item in lists">
                  <div class="mall_img"><img :src="item.img"/></div>
                  <div class="infos">
                    <div class="infos1">
                      <del class="yuan" v-if="item.price>0">{{item.price}}</del>
                      <span class="label">{{item.sold}}人已兑换</span>
                    </div>
                    <p class="name">{{item.title}}</p>
                    <p class="points">兑换积分：{{item.integral}}分</p>
                  </div>
                  <div class="buy_button">
                    <div class="button" @click="showPopup(item.id)">扫码兑换</div>
                  </div>
                </li>
              </ul>

              <div class="popup" v-show="show">
                <div class="mask"></div>
                <div class="mask_main">
                  <div class="qrcode"><img :src="qrcode"/></div>
                  <p class="qrcode_tip">请打开微信扫一扫兑换</p>
                  <div class="close" @click="onClose"><img src="../../assets/images/page/close.png"/></div>
                </div>
              </div>
            </div>



            <!--子路由区域-->


          </div>




        </div>

      </mainContent>
      <footerBar></footerBar>
      <MainMenu></MainMenu>



    </div>
</template>

<script>
  import Banner from '../../components/bannder/Banner'
  import MainMenu from '../../components/mainmenu/MainMenu'
  import footerBar from '../../components/content/footerBar'
  import mainContent from '../../components/content/mainContent'
  import NoData from '@/components/nodata/NoData'
    export default {
        name: "points_mall2",
        components:{
          Banner,
          MainMenu,
          footerBar,
          mainContent,
          NoData
        },
        data(){
          return{
              catename:'',//获取标题和栏目的名字
              flag:false,
              show: false,
              page: 1,
              limit: 1000,
              lists: [],
              qrcode: ''
          }
        },

       created(){
          this.menu_bg=this.$util.storage.get("menu_bg");
          this.catename = this.$route.query.name;
          this.getList();
       },

      methods:{

        getList() {
          let that = this;
          that.$http.get('/api/ScreenkApi/getGoodsScore', {
            vollege_id: that.$util.vollege_id,
            page: that.page,
            limit: that.limit
          }, r => {
            console.log('1212', r)
            that.lists = r.data.data;
            if (r.data.data.length == 0){
              this.flag=true;
            }

          })
        },

        showPopup(id) {
          console.log('商品id', id)
          let that = this;
          // pages/goods/goods_detail/goods_detail
          that.$http.get("/api/ScreenkApi/setWxQcde", {page_url: 'pages/goods/goods',vollege_id:that.$util.vollege_id,scene:id}, r => {
            console.log('生码', r)
            that.qrcode = r.data

          });
          this.show = true;
        },

        onClose() {
          this.show = false;
          clearInterval(this.timer);
          this.timer = null;
        },

      },








    }
</script>

<style scoped>


  .inner_content {
    box-sizing: border-box;
    padding-top: 60px;
  }

  .points_mall2{
    position: relative;
  }

  .ren {
    position: absolute;
    z-index: 999;
    top: 17%;
    left: 54%;
  }

  .wo {
    position: absolute;
    top: 17%;
    left: 20%;
    z-index: 999;

  }

  .menu_list {
    position: absolute;
    left: 0;
  }


  .son_menu {
    width: 150px;
    height: 54px;
    line-height: 54px;
    margin: 15px auto;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: url('../../assets/images/page/son_menu.png') no-repeat left center;
    transition: all 0.3s ease-out;
  }

  .son_menu a {
    color: #fff;
  }

  .son_menu.hover {
    background: url('../../assets/images/page/son_menu_hover.png') no-repeat left center;
  }

  .menu_dd.have {
    transition: all 0.3s ease-in;
  }




  .right {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
  }

  .dynamic_list {
    margin-bottom: 15px;
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    padding-left: 10px;
    border-bottom: 2px solid #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }


  .mall_ul {
    padding-top: 56px;
    padding-left: 57px;
    overflow: hidden;
    margin: 0 auto;
  }

  .mall_item {
    float: left;
    width: 270px;
    margin: 0 25px 30px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, .1);
  }

  .mall_img {
    width: 270px;
    height: 160px;
    text-align: center;
    overflow: hidden;
  }

  .mall_img img {
    height: 160px;
  }

  .infos {
    padding: 0 10px 10px;
    border-bottom: 1px solid #f5f5f5;
  }

  .infos .yuan {
    float: left;
    padding-top: 8px;
    font-size: 20px;
    color: #ec5151;
  }

  .infos1 {
    overflow: hidden;
  }

  .infos .label {
    float: right;
    padding-top: 9px;
    font-size: 16px;
    color: #666666;
  }

  .infos .name {
    padding-top: 8px;
    font-size: 18px;
  }

  .points {
    padding-top: 8px;
    font-size: 18px;
    color: #ffad13;
  }

  .buy_button .button {
    font-size: 24px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fe4b64;
  }

</style>
